<template>
  <div :class="['search', { hidden: !show }]">
    <div class="top">
      <div class="title">搜索</div>
      <i class="el-icon-close" @click="close"></i>
    </div>

    <div class="input-main">
      <div class="search-input">
        <i class="iconfont icon-sousuoxiao icon"></i>
        <input
          type="text"
          placeholder="输入文章内容或标题..."
          v-model="keywords"
          @input="input"
        />
      </div>
    </div>
    <div class="search-result">
      <div class="item" v-for="(item, i) in result" :key="i">
        <div class="title" v-html="item.title" @click="gopage(item.id)"></div>
        <div class="content" v-html="item.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      keywords: "",
      old: "",
      result: [],
    };
  },
  methods: {
    close() {
      this.show = false;
      this.keywords = "";
      this.result = [];
    },
    async getData() {
      var { data } = await this.axios.get("/article/seach", {
        params: { keywords: this.keywords },
      });
      this.result = data.data;
    },
    input() {
      if (timer) {
        clearTimeout(timer);
      }
      if (this.keywords != "" && this.keywords != this.old) {
        this.old = this.keywords;
        var timer = setTimeout(() => {
          this.getData();
        }, 1000);
      }
    },
    gopage(id) {
      this.show = false;
      this.result = [];
      this.keywords = "";
      setTimeout(() => {
        this.$router.push("/article/" + id);
      }, 600);
    },
  },
  mounted() {
    this.$bus.$on("showsearch", () => {
      this.show = true;
    });
  },
  watch:{
    keywords(){
      if(this.keywords == ''){
          this.result = []
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  width: 600px;
  height: 70vh;
  background-color: #fff;
  position: fixed;
  top: calc(50% - 35vh);
  left: calc(50% - 300px);
  z-index: 11;
  padding: 20px;
  transition: all 0.5s;
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      color: var(--color-primary);
      font-size: 20px;
      font-weight: 500;
    }
    i {
      font-size: 20px;
    }
  }
  .input-main {
    border-bottom: 2px dashed var(--color-primary);
    .search-input {
      position: relative;
      width: 100%;
      height: 35px;
      padding: 5px;
      line-height: 21px;
      border: 2px solid skyblue;
      border-radius: 20px;
      margin: 10px 0 20px 0;
      input {
        box-sizing: border-box;
        width: calc(100% - 30px);
        margin-left: 25px;
        margin-right: 5px;
      }
      i {
        position: absolute;
        left: 5px;
      }
    }
  }
  .search-result {
    height: calc(100% - 92px);
    padding: 20px 0 0 0;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      border-bottom: 1px dashed #ccc;
      padding: 10px;
      a {
        display: block;
      }
    }
    .title {
      font-size: 3vw;
      font-weight: bold;
      line-height: 3vh;
      padding: 10px 0;
      cursor: pointer;
    }
    .content {
      font-size: 2.5px;
      line-height: 16px;
    }
  }
}
@media screen and (max-width: 750px) {
  .search {
    width: 84vw;
    height: 90vh;
    top: calc(50% - 45vh);
    left: calc(50% - 42vw);
  }
}
@media screen and (min-width: 750px) {
  .search-result {
    .title {
      font-size: 20px !important;
      line-height: 20px;
    }
    .content {
      font-size: 16px !important;
      line-height: 20px !important;
    }
  }
}
.hidden {
  transform: scale(0, 0);
  // width: 0;
}
</style>
<style lang="scss">
.item {
  .title{
     span {
        font-size: 20px;
        font-weight: bold;
        color: #f95909;
      }
  }
  .content{
     span {
        color: #f95909;
      }
  }
}
@media screen and (max-width: 750px) {
  .item>.title>span{
    font-size: 3vw !important;
  }
  .content{
     span {
         font-size: 2.5vw !important;
      }
  }
}
</style>